<template>
  <h4>slot 插槽</h4>
  <slotsChild title="默认插槽">
    <img :src="imgUrl" />
  </slotsChild>
  <slotsChild title="具名插槽">
    <template #content> <video :src="videoUrl"></video> </template>
  </slotsChild>
  <slotsChild title="作用域插槽">
    <!-- 全部数据 结构 -->
    <!-- <template v-slot:scope="{ games, car }"> {{ games }} {{ car }}</template> -->
    <template #scope="gg"> {{ gg }}</template>
  </slotsChild>
</template>
<script setup lang="ts">
import slotsChild from "@/components/sub/slots-child.vue";
import { ref } from "vue";
let videoUrl = ref("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
let imgUrl = ref("https://z1.ax1x.com/2023/11/19/piNxLo4.jpg");
</script>
<style lang="scss" scoped>
img {
  width: 100%;
}
</style>
